<template>
	<view>
		<uni-status-bar />
		<view class="d-flex a-center j-sb p-3 text-light-muted">
			<view class="iconfont icon-guanbi" @click="goBack"></view>
			<view class="font-md" @click="forget">忘记密码</view>
		</view>
		<view class="p-5">
			<view class="font-big mb-5 text-center">密码登录</view>
			<input v-model="username" type="text"  class="border-bottom mb-4 uni-input px-0 " :class="focusClass.username ? 'border-warning' : ''" placeholder="请输入手机号/邮箱/账号" placeholder-class="text-light-muted" @focus="focus('username')" @blur="blur('username')" />
			<input v-model="password" type="password"  class="border-bottom mb-4 uni-input px-0" :class="focusClass.password ? 'border-warning' : ''" placeholder="请输入密码" placeholder-class="text-light-muted" @focus="focus('password')" @blur="blur('password')" />
			<view @click="submit" class="py-2 w-100 d-flex a-center j-center main-bg-color text-white rounded" hover-class="main-bg-hover-color">
				登录
			</view>
			<label class="checkbox d-flex a-center mt-2"  @click="check = !check">
				<checkbox :checked="check" />
				<text class="text-light-muted font">已阅读xxxx协议</text>
			</label>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from "../../components/uni-ui/uni-status-bar/uni-status-bar.vue"
	import {mapMutations} from 'vuex';
	export default {
		components:{
			uniStatusBar
		},
		data() {
			return {
				focusClass:{
					username:false,
					password:false
				},
				username:"",
				password:"",
				check:true,
				
				// 验证规则
				rules:{
					username:[
						{
							rule:/^[a-zA-Z]\w{5,17}$/,
							msg:"账号要以字母开头，长度在6-18之间，只能包含字母、数字和下划线"
						}
					],
					password:[
						{
							rule:/^.{5,20}$/,
							msg:"密码长度必须为5-20个字符"
						}
					]
				}
			}
		},
		methods: {
			...mapMutations(['login']),
			goBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			forget(){
				
			},
			focus(key){
				this.focusClass[key] = true
			},
			blur(key){
				this.focusClass[key] = false
			},
			// 表单验证
			validate(key){
				var check = true
				
				this.rules[key].forEach((v)=>{
					
					if(!(v.rule).test(this[key])){
						uni.showToast({
							title: v.msg,
							icon:"none"
						});
						check = false
						return false
					}
				})
				return check
				
			},
			submit(){
				if(!this.check){
					return uni.showToast({
						title: '请先同意xxxx协议',
						icon:'none'
					});
				}
				if(!this.validate('username')) return;
				if(!this.validate('password')) return;
				this.$H.post('/login',{
					username:this.username,
					password:this.password
				}).then(res=>{
					// 状态存储
					this.login(res)
					
					if(res.status = 200){
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},2000)
						// 刷新购物车
						uni.$emit('updateCart')
						uni.hideLoading()
						uni.showToast({
							title:'登录成功',
						});
					}
				})
				// uni.showLoading({
				// 	title: '登录中...',
				// 	mask: true
				// });
				// setTimeout(()=>{
				// 	uni.hideLoading()
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// },3000)
				
			}
		}
	}
</script>

<style>

</style>
